<template>
	<view class="flex-col justify-start page">
		<view class="flex-col justify-start group_3">
			<view class="flex-col">
				<view class="flex-col group_4">
					<view class="flex-row justify-between self-stretch group_5">

						<view v-for="(item,index) in navtop" :key="index" style=" display: grid;
place-items: center;">
							<text :class="type == index ?'font_2 text_6':'font_2'"
								@click="navtoptab(index)">{{item.text}}</text>

							<view v-if="type == index" class="section"></view>

						</view>
						<!-- 	<text class="font_2">放心搬家</text>
						<text class="font_2 text_5">日式搬家</text>
						<text class="">跨城搬家</text> -->
					</view>

				</view>
				<!-- {{navlist}} -->
				<view class="flex-col group_6">
					<view class="flex-row justify-center group_7">
						<view class="flex-col justify-start items-center text-wrapper"  v-for="(item,index) in navlist" :key="index" @click="navitemtab(index)" >
							<text class="font_3" :class="types == index ? 'text_7':'text_8'"    >{{item.title}}  </text>
						</view>
						<!-- 	<view class="flex-col justify-start items-center text-wrapper view">
							<text class="font_3 text_8">金杯</text>
						</view>
						<view class="flex-col justify-start text-wrapper_2">
							<text class="font_3">依维柯</text>
							</view>
						<view class="flex-col justify-start items-center text-wrapper view_2">
							<text class="font_3 text_9">厢货</text>
						</view> -->
					</view>
					<!--  <image
          class="image_5 mt-8-5"
          src="/static/icon/zhutu.png"
        /> -->
 

					<image class="image_5 mt-8-5" :src="image" />
					
					<view class="content" v-html="content"></view>
					



				</view>
			</view>
		</view>
	</view>
</template>

<script>
 
import {
		Articlelist
	} from '@/utils/user.js'

	export default {
		data() {
			return {


				navtop: [{
					text: "普通搬家",
					id: 2
				}, {
					text: "日式搬家",
					id: 3
				}, {
					text: "企业搬家",
					id: 4
				}],
				type: 0,
				navlist: [],
				types: 0,

				image: '',
				content: ''


			}
		},
		onLoad() {
			this.oute(2)

		},
		methods: {



			navtoptab(i) {
				this.type = i
				var id = this.navtop[i].id

				this.types = 0

				this.oute(id)
			},
			navitemtab(i) {
				this.types = i

				var data = this.navlist[i]
 
				this.image = data.img
				this.content = data.content

			},

			oute(e) {

				// 1 => ‘攻略’,
				// 2 => ‘普通搬家服务’,
				// 3 => ‘日式搬家服务’,
				// 4 => ‘企业搬迁服务’,
				// 5 => ‘普通搬家收费’,
				// 6 => ‘日式搬家收费’,
				// 7 => ‘企业搬迁收费’,
				// Articlelist

				var data = {
					type: e,
					page: 1
				}

				Articlelist(data).then(res => {

					console.log(res)
				 
					this.navlist = res.data.data.list
					this.navitemtab(0)

				}).catch(error => {
					console.error('Articlelist 方法执行出错：', error);
				});
			}


		}
	}
</script>

<style>
	.content{
		width: 95%;
		margin: 0 autol;
	}
	.mt-8-5 {
		margin-top: 17rpx;
	}

	.page {
		padding-bottom: 145rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group_3 {
		overflow-y: auto;
	}

	.group_4 {
		padding: 0 78.04rpx 31.16rpx 81.02rpx;
	}

	.group_5 {
		padding: 31.16rpx 0 27.92rpx;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 27.84rpx;
		color: #666666;
	}

	.text_5 {
		line-height: 27.7rpx;
	}

	.text_6 {
		color: #222222;
		font-weight: 600;
		line-height: 27.96rpx;
	}

	.section {

		background-color: #2b8eff;
		border-radius: 1rpx;
		width: 60rpx;
		height: 6rpx;
		margin-top: 15rpx;
	}

	.group_6 {
		padding: 23.06rpx 0 95rpx;
	}

	.group_7 {
		padding-left: 171.66rpx;
		padding-right: 169.06rpx;
	}

	.text-wrapper {
		width: 110rpx;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 22.14rpx;
		color: #666666;
	}

	.text_7 {
		color: #2b8eff;
		line-height: 21.86rpx;
	}

	.view {
		margin-left: 31.42rpx;
	}

	.text_8 {
		line-height: 21.94rpx;
	}

	.text-wrapper_2 {
		margin-left: 42.64rpx;
	}

	.view_2 {
		margin-left: 43.2rpx;
	}

	.text_9 {
		line-height: 22.26rpx;
	}

	.image_5 {
		width: 100%;
	/* 	width: 100vw;
		height: 159.3333vw; */
	}
</style>